<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Physics | Playing with Physics</title>

    <style type="text/css">
      body {
        font: 10pt sans;
      }
      #mynetwork {
        float: left;
        width: 600px;
        height: 600px;
        margin: 5px;
        border: 1px solid lightgray;
      }
      #config {
        float: left;
        width: 400px;
        height: 600px;
      }
    </style>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script
      type="text/javascript"
      src="https://unpkg.com/alea@1.0.0/alea.js"
    ></script>

    <script type="module">
      import { generateRandomNodesAndEdges } from "../exampleUtil.js";

      // randomly create some nodes and edges
      var data = generateRandomNodesAndEdges(60);

      // create a network
      var container = document.getElementById("mynetwork");

      var options = {
        physics: {
          stabilization: false,
          wind: { x: 0, y: 0 },
        },
        configure: {
          filter: function (option, path) {
            if (path.indexOf("physics") !== -1) {
              return true;
            }
            if (path.indexOf("smooth") !== -1 || option === "smooth") {
              return true;
            }
            return false;
          },
          container: document.getElementById("config"),
        },
      };
      globalThis.network = new vis.Network(container, data, options);
    </script>
  </head>

  <body>
    <h2>Playing with Physics</h2>
    <div style="width: 700px; font-size: 14px; text-align: justify">
      Every dataset is different. Nodes can have different sizes based on
      content, interconnectivity can be high or low etc. Because of this, the
      network configurator can be used to explore which settings may be good for
      him or her. This is ment to be used during the development phase when you
      are implementing vis.js. Once you have found settings you are happy with,
      you can supply them to network using the documented physics options.
    </div>
    <br />
    <div id="mynetwork"></div>
    <div id="config"></div>

    <p id="selection"></p>
  </body>
</html>
